{% extends 'base.html' %}

{% block title %}我的课程 - 校园生活助手系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- 侧边栏导航 -->
        <div class="col-md-3 sidebar">
            <div class="sidebar-content">
                <h3 class="sidebar-title">课程导航</h3>
                <ul class="sidebar-menu">
                    <li class="sidebar-menu-item active">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-book mr-2"></i>我的课程
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-calendar mr-2"></i>今日课表
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-tasks mr-2"></i>待完成任务
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-search mr-2"></i>课程搜索
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-history mr-2"></i>历史课程
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-star mr-2"></i>收藏课程
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-graduation-cap mr-2"></i>学习档案
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 主内容区域 -->
        <div class="col-md-9 main-content">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1 class="page-title">我的课程</h1>
                <div class="page-actions">
                    <div class="search-box">
                        <input type="text" class="search-input" placeholder="搜索课程...">
                        <button class="search-btn"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </div>
            
            <!-- 统计卡片 -->
            <div class="stats-cards">
                <div class="stat-card">
                    <div class="stat-card-icon">
                        <i class="fa fa-book"></i>
                    </div>
                    <div class="stat-card-content">
                        <div class="stat-card-number">12</div>
                        <div class="stat-card-title">当前课程</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-card-icon">
                        <i class="fa fa-calendar-check-o"></i>
                    </div>
                    <div class="stat-card-content">
                        <div class="stat-card-number">3</div>
                        <div class="stat-card-title">今日课程</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-card-icon">
                        <i class="fa fa-tasks"></i>
                    </div>
                    <div class="stat-card-content">
                        <div class="stat-card-number">5</div>
                        <div class="stat-card-title">待完成作业</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-card-icon">
                        <i class="fa fa-line-chart"></i>
                    </div>
                    <div class="stat-card-content">
                        <div class="stat-card-number">85%</div>
                        <div class="stat-card-title">平均完成率</div>
                    </div>
                </div>
            </div>
            
            <!-- 标签页导航 -->
            <div class="tabs">
                <ul class="tab-list">
                    <li class="tab-item">
                        <a href="#all-courses" class="tab-link active">全部课程</a>
                    </li>
                    <li class="tab-item">
                        <a href="#ongoing-courses" class="tab-link">进行中</a>
                    </li>
                    <li class="tab-item">
                        <a href="#completed-courses" class="tab-link">已完成</a>
                    </li>
                    <li class="tab-item">
                        <a href="#upcoming-courses" class="tab-link">即将开始</a>
                    </li>
                    <li class="tab-item">
                        <a href="#favorite-courses" class="tab-link">收藏课程</a>
                    </li>
                </ul>
            </div>
            
            <!-- 课程列表 -->
            <div class="tab-content">
                <!-- 全部课程 -->
                <div id="all-courses" class="tab-pane active">
                    <div class="course-list">
                        <!-- 课程卡片 -->
                        <div class="course-card">
                            <div class="course-card-header">
                                <div class="course-badge">进行中</div>
                                <div class="course-favorite">
                                    <i class="fa fa-star-o"></i>
                                </div>
                            </div>
                            <div class="course-card-body">
                                <div class="course-image">
                                    <img src="https://picsum.photos/seed/course1/300/200" alt="计算机网络基础">
                                </div>
                                <div class="course-info">
                                    <h3 class="course-title">计算机网络基础</h3>
                                    <div class="course-teacher">
                                        <i class="fa fa-user-circle mr-1"></i>李教授
                                    </div>
                                    <div class="course-meta">
                                        <span class="course-category">
                                            <i class="fa fa-folder mr-1"></i>计算机科学
                                        </span>
                                        <span class="course-credit">
                                            <i class="fa fa-credit-card mr-1"></i>3学分
                                        </span>
                                    </div>
                                    <div class="course-progress">
                                        <div class="progress-bar">
                                            <div class="progress" style="width: 65%"></div>
                                        </div>
                                        <div class="progress-text">65% 完成</div>
                                    </div>
                                </div>
                            </div>
                            <div class="course-card-footer">
                                <div class="course-dates">
                                    <i class="fa fa-calendar mr-1"></i>
                                    <span>2023.09.01 - 2023.12.30</span>
                                </div>
                                <div class="course-actions">
                                    <button class="btn btn-primary">进入学习</button>
                                    <button class="btn btn-outline-secondary">详情</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="course-card">
                            <div class="course-card-header">
                                <div class="course-badge">进行中</div>
                                <div class="course-favorite">
                                    <i class="fa fa-star"></i>
                                </div>
                            </div>
                            <div class="course-card-body">
                                <div class="course-image">
                                    <img src="https://picsum.photos/seed/course2/300/200" alt="数据结构与算法">
                                </div>
                                <div class="course-info">
                                    <h3 class="course-title">数据结构与算法</h3>
                                    <div class="course-teacher">
                                        <i class="fa fa-user-circle mr-1"></i>王副教授
                                    </div>
                                    <div class="course-meta">
                                        <span class="course-category">
                                            <i class="fa fa-folder mr-1"></i>计算机科学
                                        </span>
                                        <span class="course-credit">
                                            <i class="fa fa-credit-card mr-1"></i>4学分
                                        </span>
                                    </div>
                                    <div class="course-progress">
                                        <div class="progress-bar">
                                            <div class="progress" style="width: 42%"></div>
                                        </div>
                                        <div class="progress-text">42% 完成</div>
                                    </div>
                                </div>
                            </div>
                            <div class="course-card-footer">
                                <div class="course-dates">
                                    <i class="fa fa-calendar mr-1"></i>
                                    <span>2023.09.01 - 2023.12.30</span>
                                </div>
                                <div class="course-actions">
                                    <button class="btn btn-primary">进入学习</button>
                                    <button class="btn btn-outline-secondary">详情</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="course-card">
                            <div class="course-card-header">
                                <div class="course-badge">进行中</div>
                                <div class="course-favorite">
                                    <i class="fa fa-star-o"></i>
                                </div>
                            </div>
                            <div class="course-card-body">
                                <div class="course-image">
                                    <img src="https://picsum.photos/seed/course3/300/200" alt="数据库系统原理">
                                </div>
                                <div class="course-info">
                                    <h3 class="course-title">数据库系统原理</h3>
                                    <div class="course-teacher">
                                        <i class="fa fa-user-circle mr-1"></i>张讲师
                                    </div>
                                    <div class="course-meta">
                                        <span class="course-category">
                                            <i class="fa fa-folder mr-1"></i>计算机科学
                                        </span>
                                        <span class="course-credit">
                                            <i class="fa fa-credit-card mr-1"></i>3学分
                                        </span>
                                    </div>
                                    <div class="course-progress">
                                        <div class="progress-bar">
                                            <div class="progress" style="width: 78%"></div>
                                        </div>
                                        <div class="progress-text">78% 完成</div>
                                    </div>
                                </div>
                            </div>
                            <div class="course-card-footer">
                                <div class="course-dates">
                                    <i class="fa fa-calendar mr-1"></i>
                                    <span>2023.09.01 - 2023.12.30</span>
                                </div>
                                <div class="course-actions">
                                    <button class="btn btn-primary">进入学习</button>
                                    <button class="btn btn-outline-secondary">详情</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="course-card">
                            <div class="course-card-header">
                                <div class="course-badge">即将开始</div>
                                <div class="course-favorite">
                                    <i class="fa fa-star-o"></i>
                                </div>
                            </div>
                            <div class="course-card-body">
                                <div class="course-image">
                                    <img src="https://picsum.photos/seed/course4/300/200" alt="人工智能导论">
                                </div>
                                <div class="course-info">
                                    <h3 class="course-title">人工智能导论</h3>
                                    <div class="course-teacher">
                                        <i class="fa fa-user-circle mr-1"></i>刘教授
                                    </div>
                                    <div class="course-meta">
                                        <span class="course-category">
                                            <i class="fa fa-folder mr-1"></i>人工智能
                                        </span>
                                        <span class="course-credit">
                                            <i class="fa fa-credit-card mr-1"></i>3学分
                                        </span>
                                    </div>
                                    <div class="course-progress">
                                        <div class="progress-bar">
                                            <div class="progress" style="width: 0%"></div>
                                        </div>
                                        <div class="progress-text">尚未开始</div>
                                    </div>
                                </div>
                            </div>
                            <div class="course-card-footer">
                                <div class="course-dates">
                                    <i class="fa fa-calendar mr-1"></i>
                                    <span>2023.10.15 - 2024.01.20</span>
                                </div>
                                <div class="course-actions">
                                    <button class="btn btn-outline-primary">预约提醒</button>
                                    <button class="btn btn-outline-secondary">详情</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="course-card">
                            <div class="course-card-header">
                                <div class="course-badge">已完成</div>
                                <div class="course-favorite">
                                    <i class="fa fa-star"></i>
                                </div>
                            </div>
                            <div class="course-card-body">
                                <div class="course-image">
                                    <img src="https://picsum.photos/seed/course5/300/200" alt="程序设计基础">
                                </div>
                                <div class="course-info">
                                    <h3 class="course-title">程序设计基础</h3>
                                    <div class="course-teacher">
                                        <i class="fa fa-user-circle mr-1"></i>赵讲师
                                    </div>
                                    <div class="course-meta">
                                        <span class="course-category">
                                            <i class="fa fa-folder mr-1"></i>计算机科学
                                        </span>
                                        <span class="course-credit">
                                            <i class="fa fa-credit-card mr-1"></i>4学分
                                        </span>
                                    </div>
                                    <div class="course-progress">
                                        <div class="progress-bar">
                                            <div class="progress completed" style="width: 100%"></div>
                                        </div>
                                        <div class="progress-text">成绩：92</div>
                                    </div>
                                </div>
                            </div>
                            <div class="course-card-footer">
                                <div class="course-dates">
                                    <i class="fa fa-calendar mr-1"></i>
                                    <span>2023.03.01 - 2023.06.30</span>
                                </div>
                                <div class="course-actions">
                                    <button class="btn btn-outline-secondary">复习</button>
                                    <button class="btn btn-outline-secondary">详情</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="course-card">
                            <div class="course-card-header">
                                <div class="course-badge">已完成</div>
                                <div class="course-favorite">
                                    <i class="fa fa-star-o"></i>
                                </div>
                            </div>
                            <div class="course-card-body">
                                <div class="course-image">
                                    <img src="https://picsum.photos/seed/course6/300/200" alt="离散数学">
                                </div>
                                <div class="course-info">
                                    <h3 class="course-title">离散数学</h3>
                                    <div class="course-teacher">
                                        <i class="fa fa-user-circle mr-1"></i>钱副教授
                                    </div>
                                    <div class="course-meta">
                                        <span class="course-category">
                                            <i class="fa fa-folder mr-1"></i>数学
                                        </span>
                                        <span class="course-credit">
                                            <i class="fa fa-credit-card mr-1"></i>3学分
                                        </span>
                                    </div>
                                    <div class="course-progress">
                                        <div class="progress-bar">
                                            <div class="progress completed" style="width: 100%"></div>
                                        </div>
                                        <div class="progress-text">成绩：85</div>
                                    </div>
                                </div>
                            </div>
                            <div class="course-card-footer">
                                <div class="course-dates">
                                    <i class="fa fa-calendar mr-1"></i>
                                    <span>2023.03.01 - 2023.06.30</span>
                                </div>
                                <div class="course-actions">
                                    <button class="btn btn-outline-secondary">复习</button>
                                    <button class="btn btn-outline-secondary">详情</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页控制 -->
                    <div class="pagination">
                        <span class="pagination-item">
                            <a href="#" class="pagination-link disabled">&laquo;</a>
                        </span>
                        <span class="pagination-item">
                            <a href="#" class="pagination-link active">1</a>
                        </span>
                        <span class="pagination-item">
                            <a href="#" class="pagination-link">2</a>
                        </span>
                        <span class="pagination-item">
                            <a href="#" class="pagination-link">3</a>
                        </span>
                        <span class="pagination-item">
                            <a href="#" class="pagination-link">&raquo;</a>
                        </span>
                    </div>
                </div>
                
                <!-- 进行中课程 -->
                <div id="ongoing-courses" class="tab-pane">
                    <div class="course-list">
                        <!-- 这里会通过JavaScript动态加载进行中的课程 -->
                    </div>
                </div>
                
                <!-- 已完成课程 -->
                <div id="completed-courses" class="tab-pane">
                    <div class="course-list">
                        <!-- 这里会通过JavaScript动态加载已完成的课程 -->
                    </div>
                </div>
                
                <!-- 即将开始课程 -->
                <div id="upcoming-courses" class="tab-pane">
                    <div class="course-list">
                        <!-- 这里会通过JavaScript动态加载即将开始的课程 -->
                    </div>
                </div>
                
                <!-- 收藏课程 -->
                <div id="favorite-courses" class="tab-pane">
                    <div class="course-list">
                        <!-- 这里会通过JavaScript动态加载收藏的课程 -->
                    </div>
                </div>
            </div>
            
            <!-- 学习建议 -->
            <div class="section learning-recommendations">
                <h2 class="section-title">学习建议</h2>
                <div class="recommendations-list">
                    <div class="recommendation-item">
                        <div class="recommendation-icon">
                            <i class="fa fa-lightbulb-o"></i>
                        </div>
                        <div class="recommendation-content">
                            <h3 class="recommendation-title">数据结构与算法课程即将有测验</h3>
                            <p class="recommendation-text">根据你的学习进度，建议你在本周内完成树和图的章节复习，测验时间为下周三。</p>
                        </div>
                        <div class="recommendation-actions">
                            <button class="btn btn-sm btn-primary">开始复习</button>
                        </div>
                    </div>
                    
                    <div class="recommendation-item">
                        <div class="recommendation-icon">
                            <i class="fa fa-users"></i>
                        </div>
                        <div class="recommendation-content">
                            <h3 class="recommendation-title">加入学习小组</h3>
                            <p class="recommendation-text">已有32名同学加入了计算机网络基础的学习小组，你可以通过讨论区参与互动。</p>
                        </div>
                        <div class="recommendation-actions">
                            <button class="btn btn-sm btn-primary">加入小组</button>
                        </div>
                    </div>
                    
                    <div class="recommendation-item">
                        <div class="recommendation-icon">
                            <i class="fa fa-book"></i>
                        </div>
                        <div class="recommendation-content">
                            <h3 class="recommendation-title">推荐学习资源</h3>
                            <p class="recommendation-text">基于你的学习习惯，我们为你推荐了《数据库系统概念》配套练习册。</p>
                        </div>
                        <div class="recommendation-actions">
                            <button class="btn btn-sm btn-primary">查看资源</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 学习统计 -->
            <div class="section learning-stats">
                <h2 class="section-title">学习统计</h2>
                <div class="stats-content">
                    <div class="chart-container">
                        <canvas id="learningChart"></canvas>
                    </div>
                    <div class="stats-details">
                        <div class="stat-item">
                            <div class="stat-value">124</div>
                            <div class="stat-label">本周学习时长(小时)</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">89%</div>
                            <div class="stat-label">作业提交率</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">92%</div>
                            <div class="stat-label">测验平均分</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">18</div>
                            <div class="stat-label">参与讨论次数</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 标签页切换功能
        const tabLinks = document.querySelectorAll('.tab-link');
        tabLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有活动标签
                document.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
                document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
                
                // 添加当前活动标签
                this.classList.add('active');
                const targetId = this.getAttribute('href').substring(1);
                document.getElementById(targetId).classList.add('active');
                
                // 模拟加载不同标签页的数据
                loadTabData(targetId);
            });
        });
        
        // 收藏/取消收藏课程
        const favoriteButtons = document.querySelectorAll('.course-favorite');
        favoriteButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.stopPropagation();
                const starIcon = this.querySelector('i');
                
                if (starIcon.classList.contains('fa-star-o')) {
                    starIcon.classList.remove('fa-star-o');
                    starIcon.classList.add('fa-star');
                    // 实际项目中这里会有添加收藏的逻辑
                    alert('课程已添加到收藏！实际项目中会将课程添加到你的收藏列表');
                } else {
                    starIcon.classList.remove('fa-star');
                    starIcon.classList.add('fa-star-o');
                    // 实际项目中这里会有取消收藏的逻辑
                    alert('课程已从收藏中移除！实际项目中会将课程从你的收藏列表移除');
                }
            });
        });
        
        // 课程卡片点击事件
        const courseCards = document.querySelectorAll('.course-card');
        courseCards.forEach(card => {
            card.addEventListener('click', function(e) {
                // 如果点击的是按钮或收藏图标，不执行卡片点击事件
                if (e.target.closest('.course-actions') || e.target.closest('.course-favorite')) {
                    return;
                }
                
                // 实际项目中这里会跳转到课程详情页
                const courseTitle = this.querySelector('.course-title').textContent;
                alert(`即将进入课程：${courseTitle}详情页！实际项目中会跳转到课程详情页面`);
            });
        });
        
        // 进入学习按钮点击事件
        const enterCourseButtons = document.querySelectorAll('.btn-primary');
        enterCourseButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.stopPropagation();
                
                // 实际项目中这里会跳转到课程学习页
                const courseCard = this.closest('.course-card');
                const courseTitle = courseCard.querySelector('.course-title').textContent;
                alert(`即将进入课程：${courseTitle}学习页面！实际项目中会跳转到课程学习页面`);
            });
        });
        
        // 详情按钮点击事件
        const detailButtons = document.querySelectorAll('.btn-outline-secondary');
        detailButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.stopPropagation();
                
                // 实际项目中这里会跳转到课程详情页
                const courseCard = this.closest('.course-card');
                const courseTitle = courseCard.querySelector('.course-title').textContent;
                alert(`即将查看课程：${courseTitle}详情！实际项目中会跳转到课程详情页面`);
            });
        });
        
        // 预约提醒按钮点击事件
        const reminderButtons = document.querySelectorAll('.btn-outline-primary');
        reminderButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.stopPropagation();
                
                // 实际项目中这里会设置预约提醒
                const courseCard = this.closest('.course-card');
                const courseTitle = courseCard.querySelector('.course-title').textContent;
                alert(`已为课程：${courseTitle}设置预约提醒！实际项目中会在课程开始前发送通知`);
            });
        });
        
        // 分页链接点击事件
        const paginationLinks = document.querySelectorAll('.pagination-link:not(.disabled)');
        paginationLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                if (this.classList.contains('active')) {
                    return;
                }
                
                // 实际项目中这里会有分页加载数据的逻辑
                const pageText = this.textContent.trim();
                let pageNum = 1;
                
                if (pageText === '1' || pageText === '2' || pageText === '3') {
                    pageNum = parseInt(pageText);
                } else if (pageText === '»') {
                    pageNum = 2; // 假设是下一页
                } else if (pageText === '«') {
                    pageNum = 1; // 假设是上一页
                }
                
                // 更新活动页码
                document.querySelectorAll('.pagination-link').forEach(l => l.classList.remove('active'));
                this.classList.add('active');
                
                alert(`即将跳转到第${pageNum}页！实际项目中会加载该页的课程数据`);
            });
        });
        
        // 搜索功能
        const searchBtn = document.querySelector('.search-btn');
        const searchInput = document.querySelector('.search-input');
        
        searchBtn.addEventListener('click', function() {
            performSearch();
        });
        
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                performSearch();
            }
        });
        
        function performSearch() {
            const searchText = searchInput.value.trim();
            if (searchText) {
                alert(`正在搜索：${searchText}！实际项目中会根据关键词搜索课程`);
            }
        }
        
        // 学习建议操作按钮点击事件
        const recommendationButtons = document.querySelectorAll('.recommendation-actions button');
        recommendationButtons.forEach(button => {
            button.addEventListener('click', function() {
                const recommendationItem = this.closest('.recommendation-item');
                const recommendationTitle = recommendationItem.querySelector('.recommendation-title').textContent;
                
                if (this.textContent.includes('复习')) {
                    alert(`即将开始：${recommendationTitle}的复习！实际项目中会跳转到相关复习内容`);
                } else if (this.textContent.includes('加入小组')) {
                    alert(`即将加入：${recommendationTitle}！实际项目中会将你加入学习小组`);
                } else if (this.textContent.includes('查看资源')) {
                    alert(`即将查看：${recommendationTitle}！实际项目中会跳转到推荐资源页面`);
                }
            });
        });
        
        // 侧边栏菜单点击事件
        const sidebarLinks = document.querySelectorAll('.sidebar-menu-link');
        sidebarLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有活动菜单
                document.querySelectorAll('.sidebar-menu-item').forEach(item => item.classList.remove('active'));
                
                // 添加当前活动菜单
                this.closest('.sidebar-menu-item').classList.add('active');
                
                // 实际项目中这里会有切换不同功能页面的逻辑
                const menuText = this.textContent.trim();
                alert(`即将跳转到：${menuText}页面！实际项目中会跳转到相应的功能页面`);
            });
        });
        
        // 模拟加载学习统计图表
        if (typeof Chart !== 'undefined') {
            const ctx = document.getElementById('learningChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [{
                        label: '学习时长(小时)',
                        data: [18, 22, 15, 25, 16, 30, 22],
                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        } else {
            console.log('Chart.js is not loaded. Charts will not be rendered.');
        }
        
        // 模拟加载不同标签页的数据
        function loadTabData(tabId) {
            // 实际项目中这里会根据tabId加载不同的数据
            const courseList = document.getElementById(tabId).querySelector('.course-list');
            
            if (courseList.children.length === 0) {
                // 如果是首次加载，显示加载中提示
                courseList.innerHTML = '<div class="loading">加载中...</div>';
                
                // 模拟异步加载数据
                setTimeout(() => {
                    let coursesHtml = '';
                    
                    // 根据不同的标签页生成不同的课程列表
                    if (tabId === 'ongoing-courses') {
                        // 只显示进行中的课程
                        const allCourses = document.querySelectorAll('#all-courses .course-card');
                        allCourses.forEach(card => {
                            if (card.querySelector('.course-badge').textContent === '进行中') {
                                coursesHtml += card.outerHTML;
                            }
                        });
                    } else if (tabId === 'completed-courses') {
                        // 只显示已完成的课程
                        const allCourses = document.querySelectorAll('#all-courses .course-card');
                        allCourses.forEach(card => {
                            if (card.querySelector('.course-badge').textContent === '已完成') {
                                coursesHtml += card.outerHTML;
                            }
                        });
                    } else if (tabId === 'upcoming-courses') {
                        // 只显示即将开始的课程
                        const allCourses = document.querySelectorAll('#all-courses .course-card');
                        allCourses.forEach(card => {
                            if (card.querySelector('.course-badge').textContent === '即将开始') {
                                coursesHtml += card.outerHTML;
                            }
                        });
                    } else if (tabId === 'favorite-courses') {
                        // 只显示收藏的课程
                        const allCourses = document.querySelectorAll('#all-courses .course-card');
                        allCourses.forEach(card => {
                            const starIcon = card.querySelector('.course-favorite i');
                            if (starIcon.classList.contains('fa-star')) {
                                coursesHtml += card.outerHTML;
                            }
                        });
                    }
                    
                    // 如果没有相关课程，显示提示
                    if (!coursesHtml) {
                        coursesHtml = '<div class="no-courses">暂无相关课程</div>';
                    }
                    
                    courseList.innerHTML = coursesHtml;
                }, 500);
            }
        }
        
        // 页面载入动画效果
        const fadeElements = document.querySelectorAll('.section, .course-card');
        fadeElements.forEach((element, index) => {
            setTimeout(() => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(20px)';
                element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                
                setTimeout(() => {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }, 10);
            }, index * 100);
        });
        
        // 响应式调整
        function adjustForResponsive() {
            const isMobile = window.innerWidth < 768;
            
            // 在移动端隐藏侧边栏，显示顶部菜单按钮（实际项目中会有相应的实现）
            const sidebar = document.querySelector('.sidebar');
            if (isMobile) {
                // 实际项目中这里会有移动端适配的逻辑
            }
        }
        
        // 初始调整和窗口大小改变时调整
        adjustForResponsive();
        window.addEventListener('resize', adjustForResponsive);
    });
</script>
{% endblock %}